<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>linear-gradient()</title>
<meta name="description" content="CSS3参考手册之: linear-gradient()" />
<meta name="keywords" content="linear-gradient(), css3取值, css3, css3参考手册" />
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<meta name="robots" content="all" />
<!--[if lte IE 8]>
<script src="../../js/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="../../skin/article.css" />
</head>
<body>
<nav id="guide" class="g-mod">
	<div class="from">
		<a href="http://css.doyoe.com/" target="_blank">CSS3参考手册</a>
		<span>&#187;</span>
		<a href="../index.htm">取值与单位列表</a>
		<span>&#187;</span>
		<a href="index.htm" id="category" rel="values/image" name="linear-gradient()">图像值</a>
		<span>&#187;</span>
	</div>
	<div class="to">
		<span class="label">相关内容：</span>
		<div class="g-combobox g-transition">
			<a href="?" class="g-transition target">
				<strong>其它图像值参考</strong>
				<span>选择其它项<!--[if lte IE 7]><ins>IE7 and earlier, Get to die</ins><![endif]--></span>
			</a>
			<div class="g-transition list">
				<ul>
					<!-- 插入分类快速导航 -->
				</ul>
			</div>
		</div>
	</div>
</nav>
<header id="hd">
	<section id="title" class="g-mod">
		<h1 class="tit">linear-gradient()</h1>
		<ul class="info">
			<li><strong>版本：CSS3</strong></li>
		</ul>
		<!-- 插入浏览器信息 -->
	</section>
</header>
<section id="bd">
	<section class="g-mod g-attr" id="syntax">
		<h2 class="tit">语法：</h2>
		<div class="cont">
			<p><strong>&lt;linear-gradient&gt;</strong> = linear-gradient([ [ <a href="../angle/angle.htm">&lt;angle&gt;</a> | to <a href="#side-or-corner">&lt;side-or-corner&gt;</a> ] ,]? <a href="#color-stop">&lt;color-stop&gt;</a>[, <a href="#color-stop">&lt;color-stop&gt;</a>]+)</p>
			<p id="side-or-corner"><strong>&lt;side-or-corner&gt;</strong> = [left | right] || [top | bottom]</p>
			<p id="color-stop"><strong>&lt;color-stop&gt;</strong> = <a href="../color/color.htm">&lt;color&gt;</a> [ <a href="../length/length.htm">&lt;length&gt;</a> | <a href="../numeric/percentage.htm">&lt;percentage&gt;</a> ]?</p>
		</div>
	</section>
	<section class="g-mod g-attr" id="value">
		<h2 class="tit">取值：</h2>
		<div class="cont">
			<h3 class="g-color-light">下述值用来表示渐变的方向，可以使用角度或者关键字来设置：</h3>
			<dl>
				<dt><a href="../angle/index.htm">&lt;angle&gt;</a>：</dt>
				<dd>用角度值指定渐变的方向（或角度）。</dd>
				<dt>to left：</dt>
				<dd>设置渐变为从右到左。相当于: 270deg</dd>
				<dt>to right：</dt>
				<dd>设置渐变从左到右。相当于: 90deg</dd>
				<dt>to top：</dt>
				<dd>设置渐变从下到上。相当于: 0deg</dd>
				<dt>to bottom：</dt>
				<dd>设置渐变从上到下。相当于: 180deg。<span class="g-color-light">这是默认值，等同于留空不写。</span></dd>
			</dl>
			<h3 class="g-color-light">&lt;color-stop&gt; 用于指定渐变的起止颜色：</h3>
			<dl>
				<dt><a href="../color/color.htm">&lt;color&gt;</a>：</dt>
				<dd>指定颜色。</dd>
				<dt><a href="../length/length.htm">&lt;length&gt;</a>：</dt>
				<dd>用长度值指定起止色位置。不允许负值</dd>
				<dt><a href="../numeric/percentage.htm">&lt;percentage&gt;</a>：</dt>
				<dd>用百分比指定起止色位置。</dd>
			</dl>
		</div>
	</section>
	<section id="intro" class="g-mod g-attr">
		<h2 class="tit">说明：</h2>
		<div class="cont">
			<strong>用线性渐变创建图像。</strong>
			<ul>
				<li>如果想创建以对角线方式渐变的图像，可以使用 <code class="incode">to top left</code> 这样的多关键字方式来实现。</li>
				<li>
					<p>用默认的渐变方向绘制一个最简单的线性渐变</p>
					<div class="gquote">
						<p class="gquote-tit"><strong>示例代码：</strong></p>
						<div class="gquote-cont">
							<p class="img"><image src="images/linear-gradient.png" /><br />（图一）</p>
							<blockquote class="code"><code><xmp>linear-gradient(#fff, #333);
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);</xmp></code></blockquote>
						</div>
						<p class="gquote-info">以上几句代码都可以实现如（图一）的渐变效果</p>
					</div>
				</li>
			</ul>
		</div>
	</section>
	<section id="compatible" class="g-mod g-attr">
		<h2 class="tit">兼容性：</h2>
		<div class="cont">
			<ul class="support-type">
				<li><span class="support">浅绿</span> = 支持</li>
				<li><span class="unsupport">红色</span> = 不支持</li>
				<li><span class="partsupport">粉色</span> = 部分支持</li>
			</ul>
			<table class="g-data">
				<thead>
					<tr>
						<th>IE</th>
						<th>Firefox</th>
						<th>Chrome</th>
						<th>Safari</th>
						<th>Opera</th>
						<th>iOS Safari</th>
						<th>Android Browser</th>
						<th>Android Chrome</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="unsupport">6.0-9.0 <sup><a href="#support2">#2</a></sup></td>
						<td class="unsupport">2.0-3.5</td>
						<td class="partsupport">4.0-9.0<br /><sup class="fix">-webkit-</sup> <sup><a href="#support1">#1</a></sup></td>
						<td class="unsupport">3.1-3.2</td>
						<td class="support" rowspan="4">15.0+</td>
						<td class="partsupport">3.2-4.3<br /><sup class="fix">-webkit-</sup> <sup><a href="#support1">#1</a></sup></td>
						<td class="partsupport">2.1-3.0<br /><sup class="fix">-webkit-</sup> <sup><a href="#support1">#1</a></sup></td>
						<td class="support">10.0-25.0<br /><sup class="fix">-webkit-</sup> <sup><a href="#support1">#1</a></sup></td>
					</tr>
					<tr>
						<td class="support" rowspan="3">10.0+</td>
						<td class="support">3.6-15.0<br /><sup class="fix">-moz-</sup></td>
						<td class="support">10.0-25.0<br /><sup class="fix">-webkit-</sup></td>
						<td class="partsupport">4.0-5.0<br /><sup class="fix">-webkit-</sup> <sup><a href="#support1">#1</a></sup></td>
						<td class="support">5.0-6.1</td>
						<td class="support">4.0-4.3<br /><sup class="fix">-webkit-</sup></td>
						<td class="support" rowspan="3">26.0+</td>
					</tr>
					<tr>
						<td class="support" rowspan="2">16.0+</td>
						<td class="support" rowspan="2">26.0+</td>
						<td class="support">5.1-6.0<br /><sup class="fix">-webkit-</sup></td>
						<td class="support" rowspan="2">7.0+</td>
						<td class="support" rowspan="2">4.4+</td>
					</tr>
					<tr>
						<td class="support">6.1+</td>
					</tr>
				</tbody>
			</table>
			<ol class="support-info">
				<li id="support1">使用过时的语法：-webkit-gradient(linear,…)</li>
				<li id="support2">IE6.0-9.0使用私有滤镜来实现该效果: <a href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx" rel="external" class="external" target="_blank">progid:DXImageTransform.Microsoft.Gradient()</a></li>
			</ol>
		</div>
	</section>
	<section id="example" class="g-mod g-attr">
		<h2 class="tit">示例：</h2>
		<div class="cont">
			<textarea cols="90" rows="10">
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>linear-gradient()_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
div {
	width: 200px;
	height: 100px;
	margin-top: 10px;
	border: 1px solid #ddd;
}
.test {
	background: linear-gradient(#fff, #333);
}
.test2 {
	background: linear-gradient(#000, #f00 50%, #090);
}
.test3 {
	background: linear-gradient(0deg, #000 20%, #f00 50%, #090 80%);
}
.test4 {
	background: linear-gradient(45deg, #000, #f00 50%, #090);
}
.test5 {
	background: linear-gradient(to top right, #000, #f00 50%, #090);
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>
</body>
</html>
			</textarea>
			<p><input type="button" value="运行" class="g-btn g-btn-sure" /></p>
		</div>
	</section>
</section>
<footer id="ft">
	<aside id="rights" class="g-mod">
		<!-- 插入浏览器及版权信息 -->
	</aside>
</footer>
<script src="../../js/jquery.js"></script>
<script src="../../js/inner.js"></script>
</body>
</html>